<template>
    <div class="container">
      <TManageLayout />
      <div class="right-content">
        <main class="main">
          <div class="header">
            <div class="title-row">
              <h2 class="course-title">{{ courseName }}</h2>
              <div class="button-group">
                <el-button 
                  type="primary" 
                  size="medium" 
                  class="start-button"
                  @click="handleStartClass"
                >开始上课</el-button>
                <el-button 
                  type="primary" 
                  size="medium" 
                  class="edit-button"
                  @click="navigateToEdit"
                >编辑课程</el-button>
              </div>
            </div>
            <div class="divider"></div>
            <p class="description">请通过以下功能配置课程信息</p>
          </div>

          <div class="card-container">
            <!-- 教学计划表卡片 -->
            <div class="card" @click="navigateToCourse('class')">
              <img src="@/assets/svgs/schedule.svg" alt="教学计划表">
              <h3>教学计划表</h3>
              <p>创建和管理课表，规划您的教学安排</p>
            </div>
            
            <!-- 学生名单管理卡片 -->
            <div class="card" @click="navigateToCourse('student')">
              <img src="@/assets/svgs/students.svg" alt="学生名单管理">
              <h3>学生名单管理</h3>
              <p>班级学生的管理，可以一键导入</p>
            </div>
            
            <!-- 对话数据卡片 -->
            <div class="card" @click="navigateToCourse('dialogue')">
              <img src="@/assets/svgs/chat2.svg" alt="对话数据">
              <h3>对话数据</h3>
              <p>上课时，同学们使用AI助手的统计</p>
            </div>
            
            <!-- 互动数据卡片 -->
            <div class="card" @click="navigateToCourse('interaction')">
              <img src="@/assets/svgs/interaction.svg" alt="互动数据">
              <h3>互动数据</h3>
              <p>上课时，答到师生互动数据统计</p>
            </div>
          </div>
        </main>
      </div>
    </div>
  
  </template>
  
  <script setup>
  import TManageLayout from '@/components/TManageLayout.vue';
  import { useRouter, useRoute } from 'vue-router';
  import { ref, onMounted, watch, watchEffect } from 'vue';
  import { ElMessageBox, ElMessage } from 'element-plus';
  import { getCourseDetail } from '@/api/teacher';
  
  const router = useRouter();
  const route = useRoute();
  const courseName = ref('');
  const courseManageId = ref('');

  const fetchCourseDetail = async () => {
    const id = route.params.courseManageId;
    
    console.log('Fetching course detail with ID:', id);
    
    if (!id || id === 'undefined') {
      console.error('无效的课程ID:', id);
      ElMessage.error('课程信息获取失败');
      courseName.value = '未知课程';
      return;
    }

    try {
      console.log('Sending request to get course detail...');
      const res = await getCourseDetail(id);
      console.log('Course detail response:', res);
      
      if (res.code === 0 && res.data) {
        courseName.value = res.data.name || '未命名课程';
        console.log('Course name set to:', courseName.value);
      } else {
        courseName.value = '未知课程';
        console.error('获取课程详情失败:', res.message);
        ElMessage.error(res.message || '获取课程信息失败');
      }
    } catch (error) {
      console.error('获取课程详情错误:', error);
      console.error('错误详情:', error.response?.data);
      courseName.value = '未知课程';
      ElMessage.error(error.response?.data?.message || '获取课程信息失败');
    }
  };

  onMounted(async () => {
    // 从路由参数中获取 courseManageId
    courseManageId.value = route.params.courseManageId;
    console.log('Mounted - courseManageId:', courseManageId.value);
    await fetchCourseDetail();
  });

  const navigateToCourse = (page) => {
    // 确保使用正确的 courseManageId
    const id = route.params.courseManageId;
    if (!id) {
      ElMessage.error('课程ID不存在');
      return;
    }
    router.push(`/teacher/manager/${page}/${id}`);
  };

  const navigateToEdit = () => {
    const id = route.params.courseManageId;
    if (!id) {
      ElMessage.error('课程ID不存在');
      return;
    }
    router.push(`/teacher/manager/course/edit/${id}`);
  };

  const handleStartClass = () => {
    ElMessageBox.confirm('开始上课吗?', '提示', {
      confirmButtonText: '是',
      cancelButtonText: '否',
      type: 'warning'
    }).then(() => {
      router.push(`/teacher/dashboard`);
    }).catch(() => {
      // 用户点击"否"时不做任何操作
    });
  };

  // 使用 watchEffect 监听路由参数变化
  watchEffect(() => {
    const id = route.params.courseManageId;
    console.log('Route params changed - courseManageId:', id);
    if (id && id !== 'undefined') {
      fetchCourseDetail();
    }
  });

  </script>
  
  <style scoped>
  .container {
    display: flex;
    min-height: 100vh;
    background-color: #f5f7fa;
  }
  
  .right-content {
    flex: 1;
    margin-top: 4%;
    background-color: #f5f7fa;
  }
  
  
  h2 {
    margin-top: 20px;
  }
  
  .header {
    padding: 20px 20px 0;
  }
  
  .course-title {
    font-size: 24px;
    color: #333;
    margin: 0;
  }
  
  .divider {
    height: 1px;
    background-color: #e0e0e0;
    margin: 16px 0;
  }
  
  .description {
    color: #666;
    font-size: 16px;
    margin: 16px 0 24px;
  }
  
  .card-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    padding: 0 20px 20px;
    max-width: 1000px;
    margin: 0 auto;
  }
  
  .card {
    background: white;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  
  .card img {
    width: 80px;
    height: 80px;
    margin-bottom: 16px;
  }
  
  .card h3 {
    font-size: 18px;
    margin: 16px 0;
    color: #333;
  }
  
  .card p {
    font-size: 15px;
    color: #666;
    margin: 0;
  }

  .title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .course-title {
    margin: 0;
  }

  .edit-button {
    background-color: #13227a !important;
    border-color: #13227a !important;
    color: white !important;
  }

  .edit-button:hover {
    background-color: #1a2d99 !important;
    border-color: #1a2d99 !important;
  }
  
  .start-button {
    background-color: #13227a !important;
    border-color: #13227a !important;
    color: white !important;
  }

  .start-button:hover {
    background-color: #1a2d99 !important;
    border-color: #1a2d99 !important;
  }

  .button-group {
    display: flex;
    gap: 10px;  /* 按钮之间的间距 */
  }
  </style>